<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../thingjs/js/three.js"></script>
    <script src="../thingjs/js/Stats.js"></script>
    <script src="../thingjs/js/Tween.js"></script>
</head>
<style type="text/css">
    div#canvas-frame {
        border: none;
        cursor: pointer;
        width: 100%;
        height: 600px;
        background-color: #ffffff;
    }

</style>
<body onload="threeStart()">

    <div id="canvas-frame"></div>

</body>

<script>

     var renderer;
     var stats;
     function initThree() {
         width = document.getElementById("canvas-frame").clientWidth;
         height = document.getElementById("canvas-frame").clientHeight;
         renderer = new THREE.WebGLRenderer({
             antialias : true
         });
         renderer.setSize(width, height);
         document.getElementById("canvas-frame").appendChild(renderer.domElement);
         renderer.setClearColor(0xFFFFFF, 1.0);

         stats = new Stats();
         stats.domElement.style.position = 'absolute';
         stats.domElement.style.left = '0px';
         stats.domElement.style.top = '10px';
         document.getElementById("canvas-frame").appendChild(stats.domElement);
     }

     var camera;
     function initCamera() {
         camera = new THREE.OrthographicCamera(window.innerWidth / - 2, window.innerWidth / 2, window.innerHeight / 2, window.innerHeight / - 2, 10, 1000 );
         camera.position.x = 0;
         camera.position.y = 0;
         camera.position.z = 600;
         camera.up.x = 0;
         camera.up.y = 1;
         camera.up.z = 0;
         camera.lookAt({
             x : 0,
             y : 0,
             z : 0
         });
     }

     var scene;
     function initScene() {
         scene = new THREE.Scene();
     }

     var light;
     function initLight() {
         light = new THREE.AmbientLight(0xFFFFFF);
         light.position.set(100, 100, 300);
         scene.add(light);

         light = new THREE.AmbientLight(0x00FF00);
         light.position.set(0, 0, 300);
         scene.add(light);
     }

     var mesh;
     function initObject() {
         var geometry = new THREE.CylinderGeometry(100, 150, 400);
         var material = new THREE.MeshLambertMaterial({
             color : 0xFFFF00
         });
         mesh = new THREE.Mesh(geometry, material);
         mesh.position = new THREE.Vector3(0, 0, 0);
         scene.add(mesh);
     }

     function threeStart() {
         initThree();
         initCamera();
         initScene();
         initLight();
         initObject();
         initTween();
         animation();

     }

     function initTween() {
         new TWEEN.Tween(mesh.position).to({x : -500},1000).repeat(Infinity).start();
     }


     function animation() {
         camera.position.x = camera.position.x + 1;
         renderer.render(scene, camera);
         requestAnimationFrame(animation);//轮询
         stats.update();
         TWEEN.update();
     }



</script>

</html>